<template>
    <view class="wrap">
        <view class="key-input">
            <view class="title">输入验证码</view>
            <view class="tips">验证码已发送至 +{{ tel }}</view>
            <u-message-input :focus="true" :value="value" @change="change" @finish="finish" mode="bottomLine" :maxlength="maxlength"></u-message-input>
            <text :class="{ error: error }">验证码错误，请重新输入</text>
            <view class="captcha">
                <text :class="{ noCaptcha: show }" @tap="noCaptcha">收不到验证码点这里</text>
                <text v-show="sendSuc" :class="{ regain: !show }">{{ second }}秒后重新获取验证码</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                maxlength: 4,
                value: '',
                second: 10,
                show: false,
                error: false,
                sendSuc: false,
                params: {},
                tel: ''
            };
        },
        computed: {
            paramsStr() {
                return JSON.stringify(this.params);
            }
        },
        onLoad(option) {
            this.params = option;
            if (this.params.tel == null) {
                // 跳回注册登录页
                uni.$u.toast('手机号未输入');
                return;
            }
            this.tel = this.params.tel;
            // 获取验证码
            this.getCaptcha();
        },
        methods: {
            // 请求获取验证码接口
            getCaptcha() {
                this.second = 10;
                this.show = false;
                this.$u.api.smsSend({ mobile: this.tel })
                    .then(res => {
                        // 提示消息
                        uni.$u.toast(res.msg);
                        this.sendSuc = true;
                        // 倒计时
                        let interval = setInterval(() => {
                            this.second--;
                            if (this.second <= 0) {
                                this.show = true;
                                clearInterval(interval);
                            }
                        }, 1000);
                    })
                    .catch(res => {
                        this.sendSuc = false;
                    });
            },
            // 收不到验证码选择时的选择
            noCaptcha() {
                // 重置倒计时为10秒
                uni.showActionSheet({
                    itemList: ['重新获取验证码'],
                    success: res => {
                        // 获取验证码
                        this.getCaptcha();
                    },
                    fail: res => {

                    }
                });
            },
            // change事件侦听
            change(value) {
                // console.log('change', value);
            },
            // 输入完验证码最后一位执行
            finish(value) {
                console.log('输入最后一位验证码发起请求');
                let postData = {
                    mobile: this.tel,
                    captcha: value
                };
                // 发起注册请求
                this.$u.api.userMobileLogin(postData)
                    .then(res => {
                        let userinfo = res.data.userinfo;
                        // 同步存储
                        uni.setStorageSync('userinfo', JSON.stringify(userinfo));
                        uni.setStorageSync('token', userinfo.token);

                        let refer = uni.getStorageSync('refer');
                        let isTabBar = uni.getStorageSync('isTabBar');
                        if(refer){
                            uni.removeStorageSync('refer');
                            uni.removeStorageSync('isTabBar');
                            console.log(refer)
                            // 注册成功跳转到来源页
                            let type = 'to';
                            if(isTabBar){
                                type = 'tab';
                            }
                            this.$u.route({
                                type: type,
                                url: refer
                            });
                        }else {
                            // 注册成功跳转到个人中心
                            this.$u.route({
                                type: 'tab',
                                url: 'pages/template/wxCenter/index'
                            });
                        }

                    })
                    .catch(res => {
                        console.log(res);
                    });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .wrap {
        padding: 80rpx;
    }

    .box {
        margin: 30rpx 0;
        font-size: 30rpx;
        color: 555;
    }

    .key-input {
        padding: 30rpx 0;
        text {
            display: none;
        }
        .error {
            display: block;
            color: red;
            font-size: 30rpx;
            margin: 20rpx 0;
        }
    }

    .title {
        font-size: 50rpx;
        color: #333;
    }

    .key-input .tips {
        font-size: 30rpx;
        color: #333;
        margin-top: 20rpx;
        margin-bottom: 60rpx;
    }
    .captcha {
        color: $u-type-warning;
        font-size: 30rpx;
        margin-top: 40rpx;
        .noCaptcha {
            display: block;
        }
        .regain {
            display: block;
        }
    }
</style>
